{extend name="common/base"/}
{block name="style"}
<style>
    .layui-table td{
        /*表头内容居中显示*/
        text-align: center;
    }
    .layui-tree-entry{font-size:15px; line-height:24px}
    .layui-tree-set{padding:2px 0}
    .layui-tree-iconClick .layui-icon{color:#1E9FFF}
    .layui-icon layui-icon-file{font-size:16px;}
    .layui-tree-icon {height: 14px;line-height: 14px; width: 14px; text-align: center;border: 1px solid #1E9FFF; color:#1E9FFF}
    .layui-tree-line .layui-tree-set .layui-tree-set:after{top:18px;}
    .tree-left{width:200px; float:left; height:calc(100% - 30px); overflow: scroll; border:1px solid #eeeeee; background-color:#FAFAFA; padding:12px 12px 12px 5px;}
    .tree-left h3{font-size:16px; height:30px; padding-left:10px; font-weight:800}

    .gougu-upload-files{background-color: #ffffff; border:1px solid #e4e7ed;color: #c0c4cc;cursor: not-allowed; padding:0 12px; width:180px; box-sizing: border-box; display: inline-block; font-size: inherit; height: 38px; line-height: 35px; margin-right:8px; border-radius:2px;}
    .gougu-upload-tips{color:#969696}
    .layui-form-item{margin-bottom:8px;}
    .layui-input-block{min-height:24px;}
    .u-b-flex{display:flex;flex-direction: column;justify-content: center;align-content: center;
        height: 368px;}
    .l-pd-t{margin:10px 0 0 0 !important;}
</style>
{/block}
<!-- 主体 -->
{block name="body"}
<div class="p-3">
    <form class="layui-form gg-form-bar border-t border-x">

        <div class="layui-input-inline" style="width:300px;">
            <input type="text" name="keywords" placeholder="输入关键字" class="layui-input" autocomplete="off" />
        </div>
        <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">搜索</button>
    </form>

    <div class="layui-row layui-col-space10">
        <div class="layui-col-md5">

            <table class="layui-hide" id="chongfu" lay-filter="chongfu"></table>
        </div>
        <div class="layui-col-md1 u-b-flex">

            <button class="layui-btn layui-btn-normal" name="reset">重置</button>

            <button class="layui-btn layui-btn-normal l-pd-t" name="start_jisuan">开始计算</button>

        </div>
        <div class="layui-col-md5">
            <button class="layui-btn layui-btn-normal" style="margin-bottom: 20px" name="export_data"><i class="layui-icon">&#xe66f;</i>导出</button>

            <div id="results"></div>
        </div>
    </div>

</div>



<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-sm add-menu" lay-event="add">新增</button>

        <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="import"><i class="layui-icon">&#xe66f;</i>批量导入</button>
    </div>
</script>

<script type="text/html" id="toolbarDemo2">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-sm add-menu" lay-event="export">导出</button>

    </div>
</script>
<script type="text/html" id="barDemo">
    <div class="layui-btn-group">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    </div>
</script>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
    const moduleInit = ['tool'];
    function gouguInit() {
        var table = layui.table,tool = layui.tool, form = layui.form,upload = layui.upload;
        layui.pageTable = table.render({
            elem: '#chongfu',
            title: '重复数可扩展列表',
            toolbar: '#toolbarDemo',
            url: '/webadmin/fenxi/chongfu', //数据接口
            page: true, //开启分页
            limit: 20,
            cols: [
                [ //表头
                    {
                        field: 'cishu',
                        title: '冻融次数',
                        align: 'center',
                        width: 60
                    },{
                    field: 'data1',
                    title: '重复1',
                    align: 'center',
                },{
                    field: 'data2',
                    title: '重复2',
                    align: 'center',
                },{
                    field: 'data3',
                    title: '重复3',
                    align: 'center',
                },{
                    field: 'data4',
                    title: '重复4',
                    align: 'center',
                },{
                    field: 'data5',
                    title: '重复5',
                    align: 'center',
                },{
                    field: 'data6',
                    title: '重复6',
                    align: 'center',
                },{
                    field: 'avgs',
                    title: '平均值',
                    align: 'center',
                },{
                    field: 'sds',
                    title: 'SD',
                    align: 'center',
                },/*{
                    field: 'right',
                    fixed: 'right',
                    title: '操作',
                    toolbar: '#barDemo',
                    width: 60,
                    align: 'center'
                }*/
                ]
            ]
        });

        //重置
        $('body').on('click','[name="reset"]',function () {

            layer.confirm('确定要删除吗?', {
                icon: 3,
                title: '提示'
            }, function(index) {
                let callback = function (e) {
                    layer.msg(e.msg);
                    layui.pageTable.reload();
                }
                tool.delete("/webadmin/fenxi/delete_chongfu", {uid:1},callback);
                layer.close(index);
            });
        });
        //开始计算
        $('body').on('click','[name="start_jisuan"]',function () {
            //alert('start_jisuan');
            var url = '/webadmin/fenxi/start_chongfu';
            $.ajax({
                type : "GET",
                url  : url,
                error: function(request) {
                    alert("服务器繁忙, 请联系管理员!");
                    return;
                },
                success: function(result) {
                    console.log(result);
                    v = '<table class="layui-table layui-table-form">';
                    v+='<tr><td class="layui-td-gray" align="center">冻融次数</td>';
                    v+='<td class="layui-td-gray" align="center">平均值</td>';
                    v+='<td class="layui-td-gray" align="center">x<sub>1</sub>-x<sub>2</sub></td>';
                    v+='<td class="layui-td-gray" align="center">S</td>';
                    v+='<td class="layui-td-gray" align="center">t值</td>';
                    v+='<td class="layui-td-gray" align="center">t<sub>(0.05,4)</sub></td>';
                    v+='<td class="layui-td-gray" align="center">结果</td>';
                    v+='</tr>';
                    v += result;
                    v+='</table>';
                    $('#results').empty().html(v);
                }
            });
        });

        $('body').on('click','[name="export_data"]',function () {
            console.log('export_data');
            var url = '/webadmin/fenxi/export_chongfu_data';
            window.location.href=url;
        });

        //表头工具栏事件
        table.on('toolbar(chongfu)', function(obj) {
            var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
            var data = checkStatus.data;
            if (obj.event === 'add') {
                tool.side("/webadmin/fenxi/add_chongfu");
                return;
            }
            if (obj.event === 'import') {
                uploadImport();
                return;
            }
        });

        //监听行工具事件
        table.on('tool(chongfu)', function(obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                tool.side('/webadmin/fenxi/add_chongfu?id='+data.id);
                return;
            } else if (obj.event === 'del') {
                layer.confirm('确定要删除吗?', {
                    icon: 3,
                    title: '提示'
                }, function(index) {
                    let callback = function (e) {
                        layer.msg(e.msg);
                        if (e.code == 0) {
                            obj.del();
                        }
                    }
                    tool.delete("/webadmin/fenxi/delete_chongfu", { id: data.id }, callback);
                    layer.close(index);
                });
            }
        });
        let uploadFiles;
        function clearFile() {
            for (let x in uploadFiles) {
                delete uploadFiles[x];
            }
            $('#gougu-upload-choosed').html('');
        }

        function uploadImport(){
            layer.open({
                'title':'批量导入',
                'type':1,
                'area': ['640px', '360px'],
                'content':'<div class="layui-form p-3">\
						<div id="uploadType1">\
							<div class="layui-form-item">\
								<label class="layui-form-label">文件：</label>\
								<div class="layui-input-block">\
									<span class="gougu-upload-files">.xls,.xlsx</span><button type="button" class="layui-btn layui-btn-normal" id="uploadSelect">选择文件</button><a href="/static/home/重复导入模板.xlsx" class="layui-btn ml-4">Execl表格模板下载</a>\
								</div>\
							</div>\
							<div class="layui-form-item">\
								<label class="layui-form-label"></label>\
								<div class="layui-input-block">\
									<span class="gougu-upload-tips">1、只有超级管理员才能进行批量导入操作；<br>2、只能上传 .xls、.xlsx文件；<br>3、数据请勿放在合并的单元格中；<br>4、文件大小请勿超过2MB，导入数据不能超过3000条<br>5、如果导入失败，请注意检查表格数据，格式按照样本填写，部门、职位需要系统中存在，不存在的话可能会导入失败。</span>\
								</div>\
							</div>\
							<div class="layui-form-item">\
								<label class="layui-form-label"></label>\
								<div class="layui-input-block green" id="gougu-upload-choosed"></div>\
							</div>\
							<div class="layui-form-item">\
								<label class="layui-form-label"></label>\
								<div class="layui-input-block red" id="gougu-upload-note"></div>\
							</div>\
							<div class="layui-form-item layui-form-item-sm">\
								<label class="layui-form-label"></label>\
								<div class="layui-input-block">\
									<button type="button" class="layui-btn" id="uploadAjax">上传并导入</button>\
								</div>\
							</div>\
						</div> \
				</div>',
                success: function(layero, idx){
                    form.render();
                    //选文件
                    let uploadImport = upload.render({
                        elem: '#uploadSelect'
                        ,url: '/webadmin/api/import_chongfu'
                        ,auto: false
                        ,accept: 'file' //普通文件
                        ,acceptMime: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' // 此处设置上传的文件格式
                        ,exts: 'xls|xlsx' //只允许上传文件格式
                        ,bindAction: '#uploadAjax'
                        ,choose: function(obj){
                            uploadFiles = obj.pushFile();
                            // 清空,防止多次上传
                            clearFile();
                            obj.preview(function(index, file, result){
                                obj.pushFile();// 再添加
                                $('#gougu-upload-choosed').html('已选择：'+file.name);
                            });
                        }
                        ,before: function(obj){
                        }
                        ,progress: function(n, elem, e){
                            $('#gougu-upload-note').html('文件上转中...');
                            if(n==100){
                                $('#gougu-upload-note').html('数据导入中...');
                            }
                        }
                        ,error: function(index, upload){
                            clearFile();
                            $('#gougu-upload-note').html('数据导入失败，请关闭重试');
                        }
                        ,done: function(res, index, upload){
                            clearFile();
                            layer.msg(res.msg);
                            $('#gougu-upload-note').html(res.msg);
                            if(res.code==0){
                                layer.close(idx);
                                layui.pageTable.reload();
                            }
                        }
                    });
                }
            });
        }
        //监听搜索提交
        form.on('submit(webform)', function(data) {
            layui.pageTable.reload({
                where: {
                    keywords: data.field.keywords
                },
                page: {
                    curr: 1
                }
            });
            return false;
        });
    }
</script>
{/block}
<!-- /脚本 -->
